<template>
  <v-chart :option="option" style="height: 400px;width: 500px;"></v-chart>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Axios from 'axios';
import * as echarts from 'echarts';
import 'echarts-gl'
const option = ref({});

onMounted(async () => {
  const response = await Axios.get('https://geo.datav.aliyun.com/areas_v3/bound/511500_full.json');
  const mapData = response.data;
  echarts.registerMap('宜宾市', mapData); // 注册地图
  option.value = {

    series: [

      {

        name: '宜宾市地图',
        type: 'map3D',
        map: '宜宾市', // 使用注册的地图
        label: {
          show: true,
          textStyle: {
            color: '#fff', //文字颜色
            fontSize: 12, //文字大小
            fontFamily: '微软雅黑',
            backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
          },
        },

        itemStyle: {
          opacity: 0.8, // 透明度
          borderWidth: 0.5, //分界线宽度
          borderColor: 'rgb(30, 222, 210)', //分界线颜色
          color: 'rgb(18, 129, 122)',
          shadowColor: 'rgba(255, 255, 255, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
        },
        // boxDepth: 110, //地图倾斜度
        // regionHeight: 2, //地图厚度
        // shading: 'realistic',
        // // // 真实感材质相关配置 shading: 'realistic'时有效
        // realisticMaterial: {
        //   detailTexture: `src/assets/1.png`, // 纹理贴图
        //   textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
        //   roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
        //   metalness: 0, // 0材质是非金属 ，1金属
        //   roughnessAdjust: 1
        // },
        // shading: 'color',
        // // // 真实感材质相关配置 shading: 'realistic'时有效
        // colorMaterial: {
        //   detailTexture: 'src/assets/1.png'
        // },
        // postEffect: {
        //   enable: true,//后处理特效的相关配置。后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果
        //   bloom: {
        //     enable: true,
        //     bloomIntensity: 0.8
        //   }
        // },


        emphasis: { itemStyle: { color: 'rgb(30, 222, 210)' } },
        data: [
          { name: '翠屏区', value: 1 },
          { name: '屏山县', value: 2 },
          { name: '高县', value: 3 },
          { name: '兴文县', value: 4 },
          { name: '珙县', value: 5 },
          { name: '筠连县', value: 6 },
          { name: '长宁县', value: 7 },
          { name: '江安县', value: 8 },
          { name: '南溪区', value: 9 },
          { name: '叙州区', value: 10 },

        ],

      }
    ]
  };
});
</script>
